<template>
<div class="w-100 h-100 p-relative">
  <div class="w-100 h-100" ref="waterLiquidFill"></div>
  <span class="chart-title p-absolute font-16 text-gray">{{ label }}</span>

</div>
</template>

<script>
import * as echarts from 'echarts/core'
import 'echarts-liquidfill'

export default {
    name: 'WaterLiquidfill',
    props: {
        label: {
            type: String,
            default: ''
        },
        value: {
            type: [String, Number],
            default: ''
        }
    },
    mounted () {
        this.init()
    },
    computed: {
        computedColor () {
            return this.value > 0.5 ? '#f00' : '#00f'
        }
    },
    methods: {
        init () {
            const el = this.$refs.waterLiquidFill
            const chart = echarts.init(el)
            chart.setOption({
                series: [
                    {
                        type: 'liquidFill',
                        data: [this.value],
                        // backgroundStyle: {
                        //     color: 'green'
                        // },
                        // radius: '85%',
                        waveLength: '80%',
                        itemStyle: {
                            color: this.computedColor
                        },
                        label: {
                            fontSize: 30,
                            color: '#000',
                            // insideColor: '#f0f',
                            fontWeight: 400,
                            position: ['50%', '65%'],
                            align: 'center'
                            // formatter: params => {
                            //     console.log(params, 'params')
                            //     const { value } = params
                            //     return this.label + '\n' + value
                            // }
                        },
                        outline: {
                            borderDistance: 3,
                            itemStyle: {
                                borderWidth: 2,
                                borderColor: this.computedColor
                            }
                        }
                    }
                ]
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.waterLiquidFill > div {
  height: 100%;
}
.chart-title{
   left: 0;
  right: 0;
  top: 45%;
  z-index: 5;
}
</style>
